Πύλες Ποιότητας Κώδικα JavaScript: Τελειοποιώντας τη Διαμόρφωση των Pre-commit Hooks

Στον συνεχώς εξελισσόμενο κόσμο της ανάπτυξης λογισμικού, η διατήρηση υψηλής ποιότητας κώδικα είναι υψίστης σημασίας. Ο καθαρός, καλά μορφοποιημένος και χωρίς σφάλματα κώδικας όχι μόνο μειώνει το κόστος συντήρησης, αλλά προάγει επίσης τη συνεργασία και επιταχύνει τους κύκλους ανάπτυξης. Μια ισχυρή τεχνική για την επιβολή της ποιότητας του κώδικα είναι η υλοποίηση πυλών ποιότητας κώδικα χρησιμοποιώντας pre-commit hooks. Αυτό το άρθρο παρέχει έναν ολοκληρωμένο οδηγό για τη διαμόρφωση των pre-commit hooks για projects JavaScript, επιτρέποντάς σας να αυτοματοποιήσετε τους ελέγχους ποιότητας του κώδικα πριν καν αυτός φτάσει στο αποθετήριό σας.

Τι είναι τα Pre-commit Hooks;

Τα Git hooks είναι σενάρια (scripts) που το Git εκτελεί πριν ή μετά από γεγονότα όπως commit, push και receive. Τα pre-commit hooks, συγκεκριμένα, εκτελούνται πριν οριστικοποιηθεί ένα commit. Προσφέρουν μια κρίσιμη ευκαιρία για την επιθεώρηση των αλλαγών που πρόκειται να γίνουν commit και την αποτροπή commits που δεν πληρούν προκαθορισμένα πρότυπα ποιότητας. Σκεφτείτε τα ως φύλακες που εμποδίζουν την είσοδο κώδικα χαμηλής ποιότητας στη βάση κώδικά σας (codebase).

Γιατί να Χρησιμοποιήσετε Pre-commit Hooks για την Ποιότητα Κώδικα JavaScript;

• Πρώιμος Εντοπισμός Σφαλμάτων: Τα pre-commit hooks εντοπίζουν προβλήματα ποιότητας κώδικα νωρίς στη διαδικασία ανάπτυξης, εμποδίζοντάς τα να διαδοθούν περαιτέρω. Αυτό είναι πολύ πιο αποτελεσματικό από την ανακάλυψη προβλημάτων κατά την ανασκόπηση κώδικα (code reviews) ή, ακόμα χειρότερα, στην παραγωγή.
• Αυτοματοποιημένη Μορφοποίηση Κώδικα: Διασφαλίστε συνεπές στυλ κώδικα σε όλη την ομάδα και το project σας. Η αυτοματοποιημένη μορφοποίηση αποτρέπει τις συζητήσεις περί στυλ και συμβάλλει σε μια πιο ευανάγνωστη βάση κώδικα.
• Μειωμένο Φορτίο Ανασκόπησης Κώδικα: Επιβάλλοντας αυτόματα τα πρότυπα κωδικοποίησης, τα pre-commit hooks μειώνουν το φορτίο των αναθεωρητών κώδικα, επιτρέποντάς τους να επικεντρωθούν σε αρχιτεκτονικές αποφάσεις και πολύπλοκη λογική.
• Βελτιωμένη Συντηρησιμότητα Κώδικα: Μια συνεπής και υψηλής ποιότητας βάση κώδικα είναι ευκολότερο να συντηρηθεί και να εξελιχθεί με την πάροδο του χρόνου.
• Επιβεβλημένη Συνέπεια: Διασφαλίζουν ότι όλος ο κώδικας συμμορφώνεται με τα πρότυπα του project, ανεξάρτητα από τον προγραμματιστή που τον έγραψε. Αυτό είναι ιδιαίτερα σημαντικό σε κατανεμημένες ομάδες που εργάζονται από διαφορετικές τοποθεσίες – για παράδειγμα, Λονδίνο, Τόκιο και Μπουένος Άιρες – όπου τα ατομικά στυλ κωδικοποίησης μπορεί να διαφέρουν.

Βασικά Εργαλεία για την Ποιότητα Κώδικα JavaScript

Αρκετά εργαλεία χρησιμοποιούνται συνήθως σε συνδυασμό με τα pre-commit hooks για την αυτοματοποίηση των ελέγχων ποιότητας κώδικα JavaScript:

• ESLint: Ένας ισχυρός linter για JavaScript που εντοπίζει πιθανά σφάλματα, επιβάλλει στυλ κωδικοποίησης και βοηθά στη βελτίωση της αναγνωσιμότητας του κώδικα. Υποστηρίζει ένα ευρύ φάσμα κανόνων και είναι εξαιρετικά παραμετροποιήσιμο.
• Prettier: Ένας "opinionated" μορφοποιητής κώδικα που μορφοποιεί αυτόματα τον κώδικα για να τηρεί ένα συνεπές στυλ. Υποστηρίζει JavaScript, TypeScript, JSX και πολλές άλλες γλώσσες.
• Husky: Ένα εργαλείο που διευκολύνει τη διαχείριση των Git hooks. Σας επιτρέπει να ορίσετε σενάρια που θα εκτελεστούν σε διάφορα στάδια της ροής εργασίας του Git.
• lint-staged: Ένα εργαλείο που εκτελεί linters και formatters μόνο στα staged αρχεία, επιταχύνοντας σημαντικά τη διαδικασία του pre-commit. Αυτό αποτρέπει περιττούς ελέγχους σε αρχεία που δεν έχουν αλλάξει.

Διαμόρφωση των Pre-commit Hooks: Ένας Οδηγός Βήμα προς Βήμα

Ακολουθεί ένας λεπτομερής οδηγός για το πώς να ρυθμίσετε τα pre-commit hooks για το JavaScript project σας χρησιμοποιώντας Husky και lint-staged:

Βήμα 1: Εγκατάσταση Εξαρτήσεων

Πρώτα, εγκαταστήστε τα απαραίτητα πακέτα ως development dependencies χρησιμοποιώντας npm ή yarn:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Ή, χρησιμοποιώντας yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Βήμα 2: Αρχικοποίηση του Husky

Το Husky απλοποιεί τη διαδικασία διαχείρισης των Git hooks. Αρχικοποιήστε το χρησιμοποιώντας την ακόλουθη εντολή:

            npx husky install
            

              
                Copy
              
            
          

Αυτό θα δημιουργήσει έναν κατάλογο `.husky` στο project σας, ο οποίος θα αποθηκεύει τα Git hooks σας.

Βήμα 3: Διαμόρφωση του Pre-commit Hook

Προσθέστε ένα pre-commit hook χρησιμοποιώντας το Husky:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Αυτή η εντολή δημιουργεί ένα αρχείο `pre-commit` στον κατάλογο `.husky` και προσθέτει την εντολή `npx lint-staged` σε αυτό. Αυτό λέει στο Git να εκτελεί το lint-staged πριν από κάθε commit.

Βήμα 4: Διαμόρφωση του lint-staged

Το lint-staged σας επιτρέπει να εκτελείτε linters και formatters μόνο στα staged αρχεία, γεγονός που επιταχύνει σημαντικά τη διαδικασία του pre-commit. Δημιουργήστε ένα αρχείο `lint-staged.config.js` (ή `lint-staged.config.mjs` για ES modules) στον ριζικό κατάλογο του project σας και διαμορφώστε το ως εξής:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Αυτή η διαμόρφωση λέει στο lint-staged να εκτελέσει το ESLint και το Prettier σε όλα τα staged αρχεία JavaScript και TypeScript. Η παράμετρος `--fix` στο ESLint διορθώνει αυτόματα τυχόν σφάλματα linting που μπορούν να διορθωθούν αυτόματα, και η παράμετρος `--write` στο Prettier μορφοποιεί τα αρχεία και τα αντικαθιστά με τον μορφοποιημένο κώδικα.

Εναλλακτικά, μπορείτε να ορίσετε τη διαμόρφωση απευθείας στο αρχείο `package.json` σας:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Βήμα 5: Διαμόρφωση του ESLint

Αν δεν το έχετε ήδη κάνει, διαμορφώστε το ESLint για το project σας. Μπορείτε να δημιουργήσετε ένα αρχείο διαμόρφωσης ESLint χρησιμοποιώντας την ακόλουθη εντολή:

            npx eslint --init
            

              
                Copy
              
            
          

Αυτό θα σας καθοδηγήσει στη διαδικασία δημιουργίας ενός αρχείου διαμόρφωσης ESLint (`.eslintrc.js`, `.eslintrc.json`, ή `.eslintrc.yml`) με βάση τις απαιτήσεις του project σας. Μπορείτε να επιλέξετε από μια ποικιλία προκαθορισμένων διαμορφώσεων ή να δημιουργήσετε τους δικούς σας προσαρμοσμένους κανόνες.

Παράδειγμα `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Αυτή η διαμόρφωση επεκτείνει τους προτεινόμενους κανόνες του ESLint, τους προτεινόμενους κανόνες του React, τους προτεινόμενους κανόνες του TypeScript και ενσωματώνεται με το Prettier. Επίσης, απενεργοποιεί τον κανόνα `react/prop-types` και ορίζει τον κανόνα `no-unused-vars` σε προειδοποίηση.

Βήμα 6: Διαμόρφωση του Prettier

Διαμορφώστε το Prettier δημιουργώντας ένα αρχείο `.prettierrc.js` (ή `.prettierrc.json`, `.prettierrc.yml`, ή `.prettierrc.toml`) στον ριζικό κατάλογο του project σας. Μπορείτε να προσαρμόσετε τις επιλογές μορφοποίησης του Prettier ώστε να ταιριάζουν με τις οδηγίες στυλ του project σας.

Παράδειγμα `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Αυτή η διαμόρφωση ρυθμίζει το Prettier να χρησιμοποιεί μονά εισαγωγικά, χωρίς ερωτηματικά, τελικά κόμματα, πλάτος εκτύπωσης 120 χαρακτήρων και πλάτος εσοχής 2 κενών.

Εναλλακτικά, μπορείτε να ορίσετε τη διαμόρφωση του Prettier μέσα στο `package.json`:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Βήμα 7: Δοκιμή της Διαμόρφωσής σας

Για να δοκιμάσετε τη διαμόρφωσή σας, κάντε stage μερικές αλλαγές και προσπαθήστε να τις κάνετε commit. Για παράδειγμα:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Εάν υπάρχουν προβλήματα linting ή μορφοποίησης, το ESLint και το Prettier θα τα διορθώσουν αυτόματα (αν είναι δυνατόν) ή θα αναφέρουν σφάλματα. Εάν αναφερθούν σφάλματα, το commit θα ακυρωθεί, επιτρέποντάς σας να διορθώσετε τα προβλήματα πριν κάνετε ξανά commit.

Προηγμένες Επιλογές Διαμόρφωσης

Χρήση Διαφορετικών Linters και Formatters

Μπορείτε εύκολα να ενσωματώσετε άλλους linters και formatters στη διαμόρφωση του pre-commit hook σας. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το Stylelint για το linting αρχείων CSS ή SASS:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Στη συνέχεια, ενημερώστε το αρχείο `lint-staged.config.js` για να συμπεριλάβετε το Stylelint:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Εκτέλεση Tests πριν το Commit

Μπορείτε επίσης να εκτελέσετε τα unit tests σας ως μέρος του pre-commit hook. Αυτό βοηθά να διασφαλιστεί ότι ο κώδικάς σας λειτουργεί σωστά πριν γίνει commit. Υποθέτοντας ότι χρησιμοποιείτε το Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Ενημερώστε το αρχείο `lint-staged.config.js` για να συμπεριλάβετε την εντολή test:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Η παράμετρος `--findRelatedTests` λέει στο Jest να εκτελέσει μόνο τα tests που σχετίζονται με τα αρχεία που έχουν αλλάξει, γεγονός που επιταχύνει σημαντικά τη διαδικασία.

Παράλειψη των Pre-commit Hooks

Σε ορισμένες περιπτώσεις, μπορεί να θέλετε να παραλείψετε προσωρινά τα pre-commit hooks. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας την παράμετρο `--no-verify` με την εντολή `git commit`:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Ωστόσο, γενικά συνιστάται να αποφεύγετε την παράλειψη των hooks εκτός αν είναι απολύτως απαραίτητο, καθώς παίζουν κρίσιμο ρόλο στη διατήρηση της ποιότητας του κώδικα.

Αντιμετώπιση Συνήθων Προβλημάτων

• Τα hooks δεν εκτελούνται: Βεβαιωθείτε ότι το Husky έχει εγκατασταθεί και αρχικοποιηθεί σωστά, και ότι ο κατάλογος `.husky` υπάρχει στον ριζικό κατάλογο του project σας. Επίσης, επαληθεύστε ότι το αρχείο `pre-commit` στον κατάλογο `.husky` είναι εκτελέσιμο.
• Τα σφάλματα linting δεν διορθώνονται: Βεβαιωθείτε ότι χρησιμοποιείται η παράμετρος `--fix` με το ESLint, και ότι η διαμόρφωση του ESLint σας είναι ρυθμισμένη να διορθώνει αυτόματα ορισμένους τύπους σφαλμάτων.
• Το Prettier δεν μορφοποιεί τα αρχεία: Βεβαιωθείτε ότι χρησιμοποιείται η παράμετρος `--write` με το Prettier, και ότι η διαμόρφωση του Prettier είναι σωστά ρυθμισμένη.
• Αργά pre-commit hooks: Χρησιμοποιήστε το lint-staged για να εκτελείτε linters και formatters μόνο στα staged αρχεία. Επίσης, εξετάστε το ενδεχόμενο βελτιστοποίησης των διαμορφώσεών σας για το ESLint και το Prettier για να ελαχιστοποιήσετε τον αριθμό των κανόνων και των ρυθμίσεων που ελέγχονται.
• Αντικρουόμενες διαμορφώσεις: Βεβαιωθείτε ότι οι διαμορφώσεις του ESLint και του Prettier δεν έρχονται σε σύγκρουση μεταξύ τους. Αν συμβαίνει αυτό, ίσως χρειαστεί να προσαρμόσετε μία ή και τις δύο διαμορφώσεις για να επιλύσετε τις συγκρούσεις. Εξετάστε τη χρήση μιας κοινής διαμόρφωσης όπως το `eslint-config-prettier` και το `eslint-plugin-prettier` για την αποφυγή συγκρούσεων.

Βέλτιστες Πρακτικές για τα Pre-commit Hooks

• Διατηρήστε τα hooks γρήγορα: Τα αργά hooks μπορούν να επηρεάσουν σημαντικά την παραγωγικότητα των προγραμματιστών. Χρησιμοποιήστε το lint-staged για να επεξεργάζεστε μόνο τα staged αρχεία και βελτιστοποιήστε τις διαμορφώσεις των linter και formatter σας.
• Παρέχετε σαφή μηνύματα σφάλματος: Όταν ένα hook αποτυγχάνει, παρέχετε σαφή και ενημερωτικά μηνύματα σφάλματος για να καθοδηγήσετε τους προγραμματιστές σχετικά με τον τρόπο επίλυσης των προβλημάτων.
• Αυτοματοποιήστε όσο το δυνατόν περισσότερο: Αυτοματοποιήστε τη μορφοποίηση και το linting του κώδικα για να ελαχιστοποιήσετε τη χειρωνακτική προσπάθεια και να διασφαλίσετε τη συνέπεια.
• Εκπαιδεύστε την ομάδα σας: Βεβαιωθείτε ότι όλα τα μέλη της ομάδας κατανοούν τον σκοπό των pre-commit hooks και πώς να τα χρησιμοποιούν αποτελεσματικά.
• Χρησιμοποιήστε μια συνεπή διαμόρφωση: Διατηρήστε μια συνεπή διαμόρφωση για το ESLint, το Prettier και άλλα εργαλεία σε όλο το project σας. Αυτό θα βοηθήσει να διασφαλιστεί ότι όλος ο κώδικας μορφοποιείται και ελέγχεται με τον ίδιο τρόπο. Εξετάστε τη χρήση ενός κοινόχρηστου πακέτου διαμόρφωσης που μπορεί να εγκατασταθεί και να ενημερωθεί εύκολα σε πολλαπλά projects.
• Δοκιμάζετε τα hooks σας: Δοκιμάζετε τακτικά τα pre-commit hooks σας για να βεβαιωθείτε ότι λειτουργούν σωστά και ότι δεν προκαλούν απροσδόκητα προβλήματα.

Παγκόσμιες Θεωρήσεις

Όταν εργάζεστε σε παγκοσμίως κατανεμημένες ομάδες, λάβετε υπόψη τα εξής:

• Συνεπείς εκδόσεις εργαλείων: Βεβαιωθείτε ότι όλα τα μέλη της ομάδας χρησιμοποιούν τις ίδιες εκδόσεις των ESLint, Prettier, Husky και lint-staged. Αυτό μπορεί να επιτευχθεί καθορίζοντας τις εκδόσεις στο αρχείο `package.json` και χρησιμοποιώντας έναν διαχειριστή πακέτων όπως το npm ή το yarn για την εγκατάσταση των εξαρτήσεων.
• Συμβατότητα μεταξύ πλατφορμών: Δοκιμάστε τα pre-commit hooks σας σε διαφορετικά λειτουργικά συστήματα (Windows, macOS, Linux) για να διασφαλίσετε ότι λειτουργούν σωστά σε όλες τις πλατφόρμες. Χρησιμοποιήστε εργαλεία και εντολές που είναι συμβατά με όλες τις πλατφόρμες όποτε είναι δυνατόν.
• Διαφορές ωριαίας ατράκτου: Έχετε υπόψη τις διαφορές ωριαίας ατράκτου όταν επικοινωνείτε με τα μέλη της ομάδας σχετικά με προβλήματα των pre-commit hooks. Παρέχετε σαφείς οδηγίες και παραδείγματα για να τους βοηθήσετε να επιλύσουν τα προβλήματα γρήγορα.
• Υποστήριξη γλωσσών: Εάν το project σας περιλαμβάνει εργασία με πολλές γλώσσες, βεβαιωθείτε ότι τα pre-commit hooks σας υποστηρίζουν όλες τις γλώσσες που χρησιμοποιούνται στο project. Ίσως χρειαστεί να εγκαταστήσετε πρόσθετους linters και formatters για κάθε γλώσσα.

Συμπέρασμα

Η υλοποίηση των pre-commit hooks είναι ένας αποτελεσματικός τρόπος για την επιβολή της ποιότητας του κώδικα, τη βελτίωση της ομαδικής συνεργασίας και τη μείωση του κόστους συντήρησης σε projects JavaScript. Ενσωματώνοντας εργαλεία όπως το ESLint, το Prettier, το Husky και το lint-staged, μπορείτε να αυτοματοποιήσετε τη μορφοποίηση του κώδικα, το linting και τον έλεγχο, διασφαλίζοντας ότι μόνο κώδικας υψηλής ποιότητας γίνεται commit στο αποθετήριό σας. Ακολουθώντας τα βήματα που περιγράφονται σε αυτόν τον οδηγό, μπορείτε να δημιουργήσετε μια ισχυρή πύλη ποιότητας κώδικα που θα σας βοηθήσει να δημιουργήσετε πιο καθαρές, πιο συντηρήσιμες και πιο αξιόπιστες εφαρμογές JavaScript. Υιοθετήστε αυτή την πρακτική και αναβαθμίστε τη ροή εργασίας της ομάδας σας σήμερα.